/* Copyright 2024 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=./cr_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

.md-select {
  --md-arrow-width: 7px;
  --md-select-bg-color: transparent;
  --md-select-option-bg-color: white;
  --md-select-side-padding: 10px;
  --md-select-text-color: inherit;

  -webkit-appearance: none;
  background: url(//resources/images/arrow_down.svg)
      calc(100% - var(--md-select-side-padding))
      center no-repeat;
  background-color: var(--md-select-bg-color);
  background-size: var(--md-arrow-width);
  border: solid 1px var(--color-combobox-container-outline,
      var(--cr-fallback-color-neutral-outline));
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--md-select-text-color);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  height: 36px;
  line-height: 36px;
  max-width: 100%;
  outline: none;
  padding-block-end: 0;
  padding-block-start: 0;
  /* Ensures 3px space between text and arrow */
  padding-inline-end: calc(var(--md-select-side-padding) +
      var(--md-arrow-width) + 3px);
  padding-inline-start: var(--md-select-side-padding);
  width: var(--md-select-width, 200px);
}

@media (prefers-color-scheme: dark) {
  .md-select {
    --md-select-option-bg-color: var(--google-grey-900-white-4-percent);
    background-image: url(//resources/images/dark/arrow_down.svg);
  }
}

.md-select:hover {
  background-color: var(--color-comboxbox-ink-drop-hovered,
      var(--cr-hover-on-subtle-background-color));
}

/* Makes sure anything within the dropdown menu has a background. */
.md-select :-webkit-any(option, optgroup) {
  background-color: var(--md-select-option-bg-color);
}

.md-select[disabled] {
  background-color: var(--color-combobox-background-disabled,
      var(--cr-fallback-color-disabled-background));
  border-color: transparent;
  color: var(--color-textfield-foreground-disabled,
      var(--cr-fallback-color-disabled-foreground));
  opacity: 1;
  pointer-events: none;
}

.md-select:focus {
  outline: solid 2px var(--cr-focus-outline-color);
  outline-offset: -1px;
}

:host-context([dir=rtl]) .md-select {
  background-position-x: var(--md-select-side-padding);
}
